<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据概览</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/data_text.css">
    <link rel="stylesheet" type="text/css" href="../../lib/layui/css/layui.css" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <style type="text/css">
    	.layui-table tbody tr:hover, .layui-table thead tr{
    		/*background-color: rgb(8,24,50);*/
    		background-color: rgb(135, 255, 177);
    	}
    	.layui-table{
    		/*background-color: rgba(7, 41, 81, 0.85);*/
    		background-color: rgba(137, 152, 107, 0.85);
    		color: #d6dbe2;
    	}
    	.layui-table td, .layui-table th{
    		border-color: #004867;
    	}
    	body .layui-layer-title{
    		/*border-bottom: 1px solid #034c6a;*/
    		border-bottom: 1px solid #7c9d7f;
    	}
    </style>
</head>

<body>
    <!--content开始-->
    <div class="data_content">
        <div class="data_main">
            <div class="main_center fl">
                <div class="center_text">
                    <div class="main_title">
                        <img src="img/title_3.png" alt="">XXXXXX地图
                    </div>
                    <div id="mapDiv" style="width:100%;height:100%;"></div>
                </div>
            </div>
            <!--<div class="main_right fr">
                <div class="up">
                    <div class="main_title">
                        <img src="img/title_5.png" alt=""> 站点报警率统计
                    </div>
                    <div id="chart_4" class="echart fl" style="width:100%;height: 100%;"></div>
                </div>
                <div class="up">
                    <div class="main_title">
                        <img src="img/title_4.png" alt=""> 站点报警状况
                    </div>
                    <div class="main_table">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>站点</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>珲春中俄公路口岸</td>
                                    <td>正常</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>珲春圈河中朝口岸</td>
                                    <td>正常</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>珲春沙坨子中朝口岸</td>
                                    <td>正常</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>珲春中俄铁路口岸</td>
                                    <td>正常</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div>
                    <div class="main_title">
                        <img src="img/title_2.png" alt=""><span style="font-size:0.8em;">潜在安全风险等级</span>
                    </div>
                    <div id="chart_1" class="echart" style="width:100%;height: 100%;"></div>
                </div>
            </div>-->
        </div>
    </div>
    </div>
    <!--content结束-->
</body>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<script src="js/echarts.min.js"></script>
<script src="js/echart.js"></script>-->
<script type="text/javascript" src="../../lib/layer/layer.js"></script>
<script src="https://js.arcgis.com/3.46/init.js"></script>
<script type="text/javascript">
var map;
require(["dojo/dom",
    "dojo/query",
    "dojo/on",
    "esri/map",
    "esri/dijit/OverviewMap",
    "esri/toolbars/navigation",
    "esri/layers/FeatureLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/InfoTemplate",
    "dojo/domReady!"
], function(
    dom,
    query,
    on,
    Map,
    OverviewMap,
    Navigation,
    FeatureLayer,
    ArcGISDynamicMapServiceLayer,
    ArcGISTiledMapServiceLayer,
    InfoTemplate) {
    // 以下是创建地图与加入底图的代码
    map = new Map("mapDiv", {
        logo: false,
        slider:false
    });
    //https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer
    //http://202.111.178.10:36080/arcgis/rest/services/HNYGC/Hainan_15m/MapServer
    var baseLay = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer");
    map.addLayer(baseLay, 0);

    //var jclay = new FeatureLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/JCZD/MapServer/0", {
    //var jclay = new FeatureLayer("http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer/0", {
    var jclay = new FeatureLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/HunchunFeatures/MapServer/0", {
        outFields: ["*"]
    });
    map.addLayer(jclay);

    //var point = new esri.geometry.Point({ "x": 110.754, "y": 19.619, "spatialReference": { "wkid": 4326 } });
    var point = new esri.geometry.Point({ "x": 130.37, "y": 42.74, "spatialReference": { "wkid": 4326 } });
    map.centerAndZoom(point, 10);
    map.on("load", function(argument) {
        setEye();
    });

    //首页图表模拟数据
    var cdata=[];
    cdata.push([[7.13,7.08,7.16,6.83],[5.4,5.8,4.2,4.3],[1.36,1.27,1.04,1.29]]);
    cdata.push([[7.10,7.17,7.05,7.16],[4.3,4.0,5.8,5.2],[1.09,1.05,1.35,0.64]]);
    cdata.push([[7.07,7.28,6.83,6.74],[11.4,12.9,9.8,6.3],[1.74,1.88,1.36,1.62]]);
    cdata.push([[7.19,7.08,7.22,6.82],[6.2,8.1,7.4,5.9],[1.02,1.22,0.99,0.93]]);

    //点击对应口岸弹出相关信息
    jclay.on("click", function(evt) {
        var name = evt.graphic.attributes.name;
        console.log(name,"点中了哪个口岸？");
        var id = evt.graphic.attributes.OBJECTID;
        console.log(id,"点中的口岸的图形Id？"); //圈河1，沙坨子2，珲春（长岭子）3
        layer.closeAll();
        var kid = "HC";
        switch (id){
            case 1:
                kid = "QH";
                break;
            case 2:
                kid = "STZ";
                break;
            case 3:
                kid = "HC";
                break;
        }
        layer.open({
            skin: 'demo-class',
            title: name,
            type: 1,
            offset: [evt.y, evt.x],
            area: ['550px', ''],
            shadeClose: true,
            shade: false,
            //content: document.getElementById("tmap").innerHTML,
            content: document.getElementById(kid).innerHTML,
        });
        //showchart(cdata[id]);  //不必再更改图表
    });

    function setEye() {
        var overviewMap = new OverviewMap({
            map: map,
            visible: true,
            //color: "#f06676",
            color: "#f0ed66",
            attachTo: "bottom-right"
        });
        overviewMap.startup();
    }
});
</script>
<div type="text/html" id="QH" style="display: none;">
   <img src="../images/kouan/QH.jpg" width="550">
</div>
<div type="text/html" id="STZ" style="display: none;">
    <img src="../images/kouan/STZ.jpg" width="550">
</div>
<div type="text/html" id="HC" style="display: none;">
    <img src="../images/kouan/HC.jpg" width="550">
</div>

<!--<table class="layui-table" style="margin:0;">
        <thead>
            <tr>
                <th>日期</th>
                <th>监测结果</th>
                <th>PH</th>
                <th>高锰酸钾</th>
                <th>COD</th>
                <th>氨氮</th>
                <th>总磷</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>11月26日</td>
                <td>III类</td>
                <td>7.16</td>
                <td>5.2</td>
                <td>16</td>
                <td>0.64</td>
                <td>0.08</td>
            </tr>
            <tr>
                <td>11月25日</td>
                <td>IV类</td>
                <td>7.05</td>
                <td>5.8</td>
                <td>27</td>
                <td>1.35</td>
                <td>0.16</td>
            </tr>
            <tr>
                <td>11月24日</td>
                <td>IV类</td>
                <td>7.17</td>
                <td>4.0</td>
                <td>24</td>
                <td>1.05</td>
                <td>0.15</td>
            </tr>
            <tr>
                <td>11月23日</td>
                <td>IV类</td>
                <td>7.10</td>
                <td>4.3</td>
                <td>25</td>
                <td>1.09</td>
                <td>0.14</td>
            </tr>
            <tr>
                <td>11月22日</td>
                <td>IV类</td>
                <td>6.91</td>
                <td>4.6</td>
                <td>22</td>
                <td>1.16</td>
                <td>0.13</td>
            </tr>
            <tr>
                <td>11月21日</td>
                <td>IV类</td>
                <td>6.98</td>
                <td>5.4</td>
                <td>22</td>
                <td>1.20</td>
                <td>0.16</td>
            </tr>
        </tbody>
    </table>-->

</html>